<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="__ROOT__/node/node_modules/xterm/dist/xterm.css"/>
    <script src="__ROOT__/node/node_modules/xterm/dist/xterm.js"></script>
    <script src="__ROOT__/node/node_modules/xterm/dist/addons/attach/attach.js"></script>
    <script src="__ROOT__/node/node_modules/xterm/dist/addons/fit/fit.js"></script>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        .serverbox {
            padding: 16px;
            border: 3px solid #f1f1f1;
            width: 25%;
            position: absolute;
            top: 15%;
            left: 37%;
        }
    </style>
</head>
<body>

<div id="terminal" style="width:100%; height:90vh;visibility:visible;overflow:auto"></div>
<script>
    var resizeInterval;
    var wSocket = new WebSocket("ws:{:SSH_IP}:2100");
    Terminal.applyAddon(attach);  // Apply the `attach` addon
    Terminal.applyAddon(fit);  //Apply the `fit` addon
    var term = new Terminal({
        cols: 80,
        rows: 30,
        disableStdin: true
    });
    term.open(document.getElementById('terminal'));
    function ConnectServer() {
        wSocket.send(JSON.stringify({"auth": {}}));
        term.fit();
        //term.focus();
    }
    wSocket.onopen = function (event) {
        console.log("Socket Open");
        ConnectServer()
        term.attach(wSocket, false, false);
        window.setInterval(function () {
            wSocket.send(JSON.stringify({"refresh": ""}));
        }, 700);
        var c = '{$commond|raw}'
        if(c)  wSocket.send(JSON.stringify({'json':c}));
    };
    wSocket.onerror = function (event) {
        term.detach(wSocket);
        alert("Connection Closed");
    }
    //Execute resize with a timeout
    window.onresize = function () {
        clearTimeout(resizeInterval);
        resizeInterval = setTimeout(resize, 400);
    }
    // Recalculates the terminal Columns / Rows and sends new size to SSH server + xtermjs
    function resize() {
        if (term) {
            term.fit()
        }
    }

</script>
</body>
</html>
